<!doctype html>
<html lang="zh" ng-app="app">
<head>
  <meta charset="utf-8">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="mobile-web-app-capable" content="yes">

  <title>用户资料</title>  

  
  <link rel="stylesheet" href="/static/weixin/css/profile.css">
  
  <script src="/static/weixin/js/config.js"></script>

   <script src="/static/weixin/js/zarpemain.js"></script>



</head>
<!-- this is a comment -->
<body ng-controller="AppController" >
  <ons-navigator var="profileNav" title="个人主页" ng-cloak>    
    <ons-page ng-controller="MyCarController as mcCtrl">

      <ons-list modifier="inset" style="margin-top: 10px">
        <ons-list-item class="mycar-section">
          <ons-row>
            <ons-col> 
              <img id="selectedCar" ng-src="{{selectedVehicle.vehicle_model_year.image}}" height="60px" width="120" alt="当前车辆"/>
              <div class="mycar-info" style="width:120px; padding: 10px 5px 10px 0; height:60px">
                <p style="text-align:right; line-height:22px">{{selectedVehicle.license_plate}}</p>
                <p style="text-align:right;font-size:0.6em; vertical-align: middle;line-height:16px; overflow:hidden; text-overflow: ellipsis;" ng-bind="selectedVehicle.fullName"></p>
              </div>
            </ons-col>
            <ons-col width="70px" class="car-switch">
              <div class="circle" ng-click="showCarsToSelect('selectcars.html')">
                <img ng-src="{{secondaryVehicle.vehicle_model_year.image}}" height="30px" width="60px" alt="其他车辆"/>
              </div>
            </ons-col>
          </ons-row>
        </ons-list-item>
      </ons-list>

      <ons-list modifier="inset" style="margin-top: 10px;">
        <div class="major-item">
          <ons-list-item>
            <ons-row>
              <ons-col>
                <p>{{selectedVehicle.last_service_date}}</p>
                <p class="label">上次服务</p>
              </ons-col>
              <ons-col>
                <p>{{selectedVehicle.daysTillNextService}}</p>
                <p class="label">距下次保养</p>
              </ons-col>
              <ons-col>
                <p>{{selectedVehicle.next_service_mileage}}</p>
                <p class="label">下次保养公里数</p>
              </ons-col>
              <ons-col>
                <p>{{selectedVehicle.daysTillNextAppt}}</p>
                <p class="label">距您的预约</p>
              </ons-col>
            </ons-row>
          </ons-list-item>
        </div>
      </ons-list>

      <ons-list modifier="inset" style="margin-top:10px">
        <div class="narrow-row-list">
            <ons-list-item>
              <ons-row>
                <ons-col>
                  <div>我的积分：{{customer.score}}</div>
                </ons-col>
                <ons-col>
                  <div style="margin-left:10px">我的活动：{{customer.campaigns.size}}</div>
                </ons-col>
              </ons-row>
            </ons-list-item>
        </div>
      </ons-list>

      <div class="button-group">
        <ons-row>
          
          <ons-col>
            <a href="schedule.html?vehicle_id={{selectedVehicle.id}}&dealer={{dealer}}&wechat_open_id={{wechat_open_id}}">
              <span class="fa fa-calendar fa-lg"></span>
              <p>预约</p>
            </a>
          </ons-col>
        
          <ons-col>
            <a ng-href="saveme.html?vehicle_id={{selectedVehicle.id}}&dealer={{dealer}}&wechat_open_id={{wechat_open_id}}">
              <span class="fa fa-warning fa-lg"></span>
              <p>救援</p>
            </a>
          </ons-col>
        </ons-row>
        <ons-row>
          <ons-col>
            <a ng-click="showServiceOrders('solist.html')">
              <span class="fa fa-comment fa-lg"></span>
              <p>服务反馈</p>
            </a>
          </ons-col>
          <ons-col>
            <a href="complaint.html?dealer={{dealer}}&wechat_open_id={{wechat_open_id}}">
              <span class="fa fa-edit fa-lg"></span>
              <p>投诉／建议</p>
            </a>
          </ons-col>
        </ons-row>
        <ons-row>
          <ons-col>
            <a ng-click="showPath()">
              <span class="fa fa-road fa-lg"></span>
              <p>到店路径</p>
            </a>
          </ons-col>
          <ons-col>
            <a href="ticketlookup.html?dealer={{dealer}}&wechat_open_id={{wechat_open_id}}">
              <span class="fa fa-money fa-lg"></span>
              <p>查违章</p>
            </a>
          </ons-col>
        </ons-row>
      </div>
      <ons-modal var="app.modal">
        <ons-icon icon="gear" spin="true" style="line-height: 20px; vertical-align: middle;" ></ons-icon>
        <span style="line-height: 20px; font-size: 15px;">获取数据中。。。</span>
      </ons-modal>
    </ons-page>
  </ons-navigator> <!-- end of navigator -->

  <ons-template id="selectcars.html">
    <ons-page ng-controller="SelectCarsController">
      <ons-toolbar>
        <div class="left"><ons-back-button>返回</ons-back-button></div>
      </ons-toolbar>
      <ons-list>
        <ons-list-item ng-repeat="v in vehicles" modifier="tappable">
          <label class="radio-button radio-button--list-item" >
            <img ng-src="{{v.vehicle_model_year.image}}" alt="vehicle_image" width="100" height="50" style="float:right"/>
            <input type="radio" name="b" ng-checked="v.id == selectedV.id"  ng-click="selectVehicle(v, $event)">
            <div class="radio-button__checkmark radio-button--list-item__checkmark"></div>
            {{ v.license_plate }}
          </label> 
        </ons-list-item>
      </ons-list>
    </ons-page>
  </ons-template>
  
  <script src="/static/weixin/js/profile.js"></script>
  <script>
    ons.ready(function() {
    });
  </script>
</body>  
</html>
